<template>
  <view>
    <view class="userinfo-box">
      <!-- 头像 -->
      <view class="userinfo-pic">
        <uni-icons color=" #bcbcbc" type="person-filled" size="80"></uni-icons>
        <text>Long</text>
      </view>
      <view class="userinfo-content">
        <view class="userinfo-content-top">
          <view class="userinfo-content-top-item">
            <text>8</text>
            <text>收藏的店铺</text>
          </view>
          <view class="userinfo-content-top-item">
            <text>8</text>
            <text>收藏的商品</text>
          </view>
          <view class="userinfo-content-top-item">
            <text>8</text>
            <text>关注的商品</text>
          </view>
          <view class="userinfo-content-top-item">
            <text>8</text>
            <text>足迹</text>
          </view>
        </view>
        <view class="userinfo-content-center">
          <view class="userinfo-content-center-top">
            我的订单
          </view>
          <view class="userinfo-content-center-bom">
            <view class="userinfo-content-top-item">
              <image src="/static/my-icons/icon1.png" mode=""></image>
              <text>待付款</text>
            </view><view class="userinfo-content-top-item">
              <image src="/static/my-icons/icon2.png" mode=""></image>
              <text>待收货</text>
            </view><view class="userinfo-content-top-item">
              <image src="/static/my-icons/icon3.png" mode=""></image>
              <text>退货/退款</text>
            </view><view class="userinfo-content-top-item">
              <image src="/static/my-icons/icon4.png" mode=""></image>
              <text>全部订单</text>
            </view>
          </view>
        </view>
        <view class="userinfo-content-bom">
          <view class="userinfo-content-bom-item">
            <text>收货地址</text>
            <uni-icons type="right" size="16"></uni-icons>
          </view><view class="userinfo-content-bom-item">
            <text>联系客服</text>
            <uni-icons type="right" size="16"></uni-icons>
          </view><view class="userinfo-content-bom-item" @click="logout">
            <text>退出登录</text>
            <uni-icons type="right" size="16"></uni-icons>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import { useUserStore } from '../../store/user';
  const userStore = useUserStore()
  export default {
    name:"my-userinfo",
    data() {
      return {
        
      };
    },
    methods: {
      async logout () {
        const res = await uni.showModal({
          title: '提示',
          content: '确定退出登录吗？'
        })
        console.log(res);
        if (res.errMsg === "showModal:ok") {
          userStore.removeToken()
        }
      }
    }
  }
</script>

<style lang="scss">
  .userinfo-box {
    display: flex;
    flex-direction: column;
    font-family: "微软雅黑";
    font-weight: 500;
    align-items: center;
    background-color: #f3f3f3;
    height: 100vh;
    .userinfo-pic {
      width: 100%;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #C00000;
      >text {
        margin-top: 10px;
        color: #fff;
      }
    }
    .userinfo-content{
      margin-top: -10px;
      width: 90%;
      .userinfo-content-top{
        display: flex;
        background-color: #fff;
        border-radius: 5px;
      }
      .userinfo-content-top-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        font-size: 12px;
        width: 25%;
        image{
          width: 40px;
          height: 40px;
        }
      }
      .userinfo-content-center {
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
        background-color: #fff;
        .userinfo-content-center-top {
          font-size: 14px;
        }
        .userinfo-content-center-bom {
          margin-top: 15px;
          display: flex;
        }
      }
      .userinfo-content-bom {
        border-radius: 6px;
        .userinfo-content-bom-item {
          padding: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          background-color: #fff;
        }
      }
    }
  }
</style>